<template>
    <div class="task-list-wrap">
        <div style="flex: 1; flex-shrink: 0; overflow-y: hidden; display: flex; flex-direction: column">
            <div style="padding: 12px 0 0px 16px">
                <flexbox justify="space-between" style="padding-left: 34px">
                    <span style="font-weight: bold; font-size: 15px">业务需求</span>
                    <span style="margin-right: 16px; font-size: 12px; color: #505a6e; cursor: pointer" @click="showMoreList">查看列表</span>
                </flexbox>
                <flexbox class="margin-t-8" style="height: 32px; line-height: 32px">
                    <HDicSelect :defaultOptions="defaultTaskOptions" type="status" title="状态" v-model:value="form.status" />
                    <HSuggestInputSearch
                        class="margin-l-8"
                        size="small"
                        allowClear
                        placeholder="请输入需求名称或编号"
                        style="margin-right: 8px"
                        @change="handleSearch"
                    />
                </flexbox>
            </div>
            <div
                v-infinite-scroll="getList"
                infinite-scroll-watch-disabled="scrollDisabled"
                :infinite-scroll-distance="100"
                style="flex: 1; flex-shrink: 0; overflow-y: auto; padding-top: 8px"
            >
                <TaskItem
                    :class="[currSelectIndex === index && item.status !== '1' ? 'selected-item' : '']"
                    v-for="(item, index) of taskList"
                    :detail="item"
                    :key="item.id"
                    @success="handleSuccess"
                    @click="handleSelectItem(index)"
                />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { useRouter } from 'vue-router';
import { deepClone } from '@/utils/util';
import { HDicSelect, HSuggestInputSearch } from '@/components';
import TaskItem from './TaskItem.vue';
import { defineComponent, unref, reactive, toRefs, watch, getCurrentInstance, computed } from 'vue';
interface State {
    query: any;
    form: any;
    defaultTaskOptions: any[];
}
export default defineComponent({
    components: {
        TaskItem,
        HDicSelect,
        HSuggestInputSearch
    },
    props: {
        system: {
            type: Number,
            default: null
        }
    },
    setup(props) {
        const instance: any = getCurrentInstance();
        const router = useRouter();
        const state = reactive<State>({
            query: {
                pageNum: 1,
                pageSize: 20,
                selectType: 'workbench',
                requestSystem: null
            },
            form: {
                status: null,
                requestName: '',
                requestNumber: ''
            },
            defaultTaskOptions: []
        });
        const taskList = computed(() => {
            return store.getters.taskList;
        });
        const currSelectIndex = computed(() => {
            return store.getters.currSelectIndex;
        });
        const getList = async (isRefresh = false) => {
            store.dispatch('workbenchTaskList/getList', isRefresh);
        };
        const getDetailData = async (id) => {
            const query = {
                id
            };
            const { moule } = await api.pmpRequestInfoModel.findById(query);
            return moule;
        };
        const handleSuccess = async (detail, type) => {
            const index = unref(taskList).findIndex((item) => item.id === detail.id);
            if (type === 'delete') {
                const list: any = deepClone(taskList.value);
                list.splice(index, 1);
                store.commit('workbenchTaskList/SET_LIST', list);
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', -1);
            } else {
                const data = await getDetailData(detail.id);
                if (index >= 0) {
                    const list: any = deepClone(taskList.value);
                    list[index] = {
                        ...data
                    };
                    store.commit('workbenchTaskList/SET_LIST', list);
                }
            }
            // 更新该业务需求下的产品需求
            if (index === currSelectIndex.value && currSelectIndex.value >= 0) {
                instance.proxy.$mitt.emit('refreshList', {
                    relateRequireId: unref(taskList)[currSelectIndex.value].id
                });
            }
        };
        const handleSelectItem = (index) => {
            if (currSelectIndex.value === index) {
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', -1);
                instance.proxy.$mitt.emit('refreshList', {
                    relateRequireId: null
                });
            } else {
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', index);
                instance.proxy.$mitt.emit('refreshList', {
                    relateRequireId: unref(taskList)[index].id
                });
            }
        };
        const showMoreList = () => {
            router.push({
                path: '/taskRequire/myRequire',
                query: {
                    systemId: props.system
                }
            });
        };
        const handleSearch = (val) => {
            state.form.requestName = val ? val.trim() : val;
            state.form.requestNumber = val ? val.trim() : val;
        };
        // 更新该业务需求
        instance.proxy.$mitt.on('refreshTaskList', (query = {}, isRefresh = false) => {
            console.log(query, isRefresh);
            store.commit('workbenchTaskList/SET_SCROLLDISABLED', false);
            getList(true);
        });
        watch(
            () => props.system,
            (n) => {
                store.commit('workbenchTaskList/SET_SCROLLDISABLED', false);
                store.commit('workbenchTaskList/SET_QUERY', {
                    pageNum: 1,
                    requestSystem: n
                });
                getList();
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', -1);
            },
            { immediate: true }
        );
        watch(
            () => state.form,
            (n) => {
                store.commit('workbenchTaskList/SET_SCROLLDISABLED', false);
                store.commit('workbenchTaskList/SET_QUERY', {
                    pageNum: 1,
                    ...n
                });
                getList();
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', -1);
                // 如果有选中的业务需求，需要清空，并且更新产品需求
                if (currSelectIndex.value >= 0) {
                    instance.proxy.$mitt.emit('refreshList', {
                        relateRequireId: null
                    });
                }
            },
            { deep: true }
        );
        state.defaultTaskOptions = store.getters.dicOptions.status.filter((item: any) => ['待处理', '待排期', '待设计转化', '进行中'].includes(item.dimensionName)
        );
        return {
            taskList,
            currSelectIndex,
            ...toRefs(state),
            getList,
            handleSuccess,
            handleSelectItem,
            showMoreList,
            handleSearch
        };
    }
});
</script>

<style scoped lang="less">
.task-list-wrap {
    width: 100%;
    height: calc(100vh - 135px);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    .active {
        border: 1px dashed #0176d3;
    }
    .add-wrap {
        position: absolute;
        bottom: 0;
        left: 0px;
        height: 44px;
        z-index: 100;
        background: #fff;
        padding: 0 0px 12px 16px;
        cursor: pointer;
        .add-btn {
            background: rgba(23, 35, 61, 0.03);
            height: 100%;
            border: 1px dashed @primary-color;
        }
    }
    .selected-item {
        background: #f5f6f7;
    }
}
</style>
